<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div class="box">
    <div>
      苹果10￥ /斤，折扣<8折>
    </div>
    <div>请输入你要购买的斤数<input type="text" v-model.number="num" @keyup.enter="fn"></div>
    <button @click="fn">结账</button>
    <div>结账单：总价：{{total}}￥元，折后价：{{discount}}￥元 省了：{{total-discount}}￥元 </div>

  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '.box',
      data: {
        num: '',
        total: 0,
        discount: ''
      },
      methods: {
        fn() {
          if (typeof this.num !== 'number') {
            return alert("输入正确的斤数")
          }
          this.total = this.num * 10
          this.discount = this.total * 0.8
          this.num = ''
        }
      },
    })
  </script>

</body>

</html>